<script setup lang="ts">
import { useControllerStore } from '@/store';
import useToast from '@/hooks/useToast';
import EquipRequest from '@/request/equipRequest';
import to from '@/utils/to';
import useModal from '@/hooks/useModal';
import { navigate } from '@/utils/navigate';
import { APP_NICK_NAME } from '@/config/app';

interface IProps {
  equipId: number;
  type: string;
  content: any;
  relationId?: number;
}

type EmitEvents = {
  (event: 'changeValue', payload: { type: string; content: any }): void;
};

interface IState {
  show: boolean;
  type: string;
  content: any;
  actualUserList: IEquipUserInfo[];
  timeType: number;
  beginTime: string;
  endTime: string;
}

const props = defineProps<IProps>();
const emits = defineEmits<EmitEvents>();
const state = reactive<IState>({ show: false, type: '', content: '', actualUserList: [], timeType: 1, beginTime: '', endTime: '' });
const typeArr = reactive(['nickName', 'phoneTwo', 'asr', 'low']);
const installAreaList = reactive(['客厅', '主卧', '次卧', '儿童房', '书房', '厨房', '阳台', '卫生间', '玄关', '办公室', '自定义区域']);
const asrContent = reactive<{ asrFlag: string; asrOne: string; asrTwo: string; asrThree: string }>({ asrFlag: '1', asrOne: '1', asrTwo: '1', asrThree: '1' });
const controllerStore = useControllerStore();
const { showToast } = useToast();
const { showModal } = useModal();

watch(
  () => controllerStore.$state.setEquipInfoPopup,
  (show) => {
    if (show) {
      state.show = true;
    } else {
      state.show = false;
    }
  },
);

watch(
  () => props.type,
  (type) => {
    if (type) {
      console.log(props.type, props.content, 22222);
      state.type = props.type;
      state.content = props.content;
      if (props.type === 'asr' && props.content) {
        let arr = props.content.split('');
        if (arr.length === 4) {
          console.log(arr, 12321321);
          asrContent.asrFlag = arr[0];
          asrContent.asrOne = arr[1];
          asrContent.asrTwo = arr[2];
          asrContent.asrThree = arr[3];
          console.log(asrContent, 888888);
        }
      } else if (props.type === 'alarmTime' && props.content) {
        let arr = props.content.split(',');
        if (arr.length === 2) {
          state.timeType = 1;
          state.beginTime = arr[0];
          state.endTime = arr[1];
        }
      } else if (props.type === 'owner') {
        listLocaleUser();
      } else if (props.type === 'alarmMode') {
        navigate({ url: '/subcontract/equipment/equipDetail/alarmSetting?infraredId=' + props.relationId });
      }
    } else {
      state.type = '';
      state.content = '';
    }
  },
);

const listLocaleUser = () => {
  EquipRequest.GetEquipUserInfo({ equipId: props.equipId }).then((res) => {
    state.actualUserList = res.data;
  });
};

const handleUpdateSubmit = () => {
  switch (props.type) {
    case 'nickName':
      EquipRequest.SetEquipInfo({ id: props.equipId, value: state.content, type: 1 }).then((res) => {
        showToast('设置成功');
        emits('changeValue', { type: props.type, content: state.content });
        controllerStore.$patch({ setEquipInfoPopup: false });
      });
      break;
    case 'phoneTwo':
      EquipRequest.SetBeeperPhoneTwo({ beeperId: props.relationId, phoneTwo: state.content }).then((res) => {
        showToast('设置成功');
        emits('changeValue', { type: props.type, content: state.content });
        controllerStore.$patch({ setEquipInfoPopup: false });
      });
      break;
    case 'asr':
      //console.log(asrContent.asrFlag + ',' + asrContent.asrOne + ',' + asrContent.asrTwo + ',' + asrContent.asrThree);
      let asrValue = asrContent.asrFlag + (asrContent.asrOne ? 1 : 0) + (asrContent.asrTwo ? 1 : 0) + (asrContent.asrThree ? 1 : 0);
      EquipRequest.SendCmdToBeeper({ beeperId: props.relationId, value: asrValue, type: 24 }).then((res) => {
        showToast('设置成功');
        controllerStore.$patch({ setEquipInfoPopup: false });
      });
      break;
    case 'low':
      EquipRequest.SendCmdToBeeper({ beeperId: props.relationId, value: state.content, type: 25 }).then((res) => {
        showToast('设置成功');
        controllerStore.$patch({ setEquipInfoPopup: false });
      });
      break;
    case 'alarmMode': // 预警模式
      break;
  }
};

const handleChangeSubmit = async (e: any) => {
  switch (props.type) {
    case 'installArea':
      const value = e.detail.value;
      if (value === `自定义区域`) {
        controllerStore.$patch({ setEquipInfoPopup: false });
        const [err, success] = await to(showModal('', { editable: true, showCancel: true }, `请输入自定义区域`));
        if (err) return;
        if (success.confirm) state.content = success.content;
        else return;
      } else {
        state.content = value;
      }
      EquipRequest.SetEquipInfo({ id: props.equipId, value: state.content, type: 2 }).then((res) => {
        showToast('设置成功');
        emits('changeValue', { type: props.type, content: state.content });
        controllerStore.$patch({ setEquipInfoPopup: false });
      });
      break;
    case 'alarmTime':
      state.endTime = e.detail;
      state.content = state.beginTime + ',' + state.endTime;
      EquipRequest.SetEquipInfo({ id: props.equipId, value: state.content, type: 3 }).then((res) => {
        showToast('设置成功');
        emits('changeValue', { type: props.type, content: state.content });
        state.timeType = 1;
        controllerStore.$patch({ setEquipInfoPopup: false });
      });
      break;
    case 'owner':
      //console.log(e.detail.value, 666666);
      // e.detail.value = {id:7,name:刘沙}
      state.content = e.detail.value.name;
      EquipRequest.SetEquipInfo({ id: props.equipId, value: state.content, type: 4 }).then((res) => {
        showToast('设置成功');
        emits('changeValue', { type: props.type, content: state.content });
        controllerStore.$patch({ setEquipInfoPopup: false });
      });
      break;
  }
};

const chooseBeginTime = (e: any) => {
  state.timeType = 2;
  state.beginTime = e.detail;
};

const closePopup = () => {
  controllerStore.$patch({ setEquipInfoPopup: false });
};
</script>

<template>
  <van-popup custom-style="width:80%" round v-if="typeArr.includes(state.type)" :show="state.show" @close="closePopup">
    <view class="bg-white c-br c-pd">
      <van-field :value="state.content" @change="state.content = $event.detail" v-if="state.type === 'nickName'" label="设备昵称" placeholder="请输入设备昵称" required clearable />
      <van-field :value="state.content" @change="state.content = $event.detail" v-if="state.type === 'phoneTwo'" label="联系人备用电话" placeholder="请输入联系人备用电话" required clearable />

      <view v-if="state.type === 'asr'">
        <text class="text-align-center py-3">语音识别</text>
        <van-radio-group :value="asrContent.asrFlag" @change="asrContent.asrFlag = $event.detail" direction="horizontal">
          <van-radio name="1">开启</van-radio>
          <van-radio name="0">关闭</van-radio>
        </van-radio-group>
        <view class="py-3" v-if="asrContent.asrFlag === '1'">
          <van-checkbox shape="square" name="1" :value="asrContent.asrOne" @change="asrContent.asrOne = $event.detail">{{ APP_NICK_NAME }}{{ APP_NICK_NAME }}</van-checkbox>
          <van-checkbox shape="square" name="1" :value="asrContent.asrTwo" @change="asrContent.asrTwo = $event.detail">我要打电话</van-checkbox>
          <van-checkbox shape="square" name="1" :value="asrContent.asrThree" @change="asrContent.asrThree = $event.detail">救命</van-checkbox>
        </view>
      </view>

      <view v-if="state.type === 'low'">
        <text class="text-align-center py-3">低电提醒</text>
        <van-radio-group :value="state.content" @change="state.content = $event.detail" direction="horizontal">
          <van-radio :name="1">开启</van-radio>
          <van-radio :name="0">关闭</van-radio>
        </van-radio-group>
      </view>

      <view v-if="state.type === 'alarmTime'">
        <text class="text-align-center py-3">报警时段</text>
        <van-radio-group :value="state.content" @change="state.content = $event.detail" direction="horizontal">
          <van-radio :name="1">开启</van-radio>
          <van-radio :name="0">关闭</van-radio>
        </van-radio-group>
      </view>

      <view v-if="state.type === 'alarmMode'">
        <text class="text-align-center py-3">预警模式</text>
        <van-radio-group :value="state.content" @change="state.content = $event.detail" direction="horizontal">
          <van-radio :name="1">开启</van-radio>
          <van-radio :name="0">关闭</van-radio>
        </van-radio-group>
      </view>

      <view class="mt-3">
        <van-button block round type="primary" size="small" @click="handleUpdateSubmit">保 存</van-button>
      </view>
    </view>
  </van-popup>

  <!-- 安装区域 -->
  <van-popup position="bottom" v-if="state.type === 'installArea'" :show="state.show" @close="closePopup">
    <view class="bg-white w-full">
      <van-picker show-toolbar value-key="text" :columns="installAreaList" @confirm="handleChangeSubmit" @cancel="closePopup" title="选择安装区域" />
    </view>
  </van-popup>

  <!--门磁报警时间-->
  <van-popup position="bottom" v-if="state.type === 'alarmTime'" :show="state.show" @close="closePopup">
    <van-datetime-picker v-if="state.timeType === 1" type="time" title="开始时间" :value="state.beginTime" @cancel="closePopup" @confirm="chooseBeginTime"> </van-datetime-picker>
    <van-datetime-picker v-if="state.timeType == 2" type="time" title="结束时间" :value="state.endTime" @cancel="closePopup" @confirm="handleChangeSubmit"> </van-datetime-picker>
  </van-popup>

  <!-- 设备使用人 -->
  <van-popup position="bottom" v-if="state.type === 'owner'" :show="state.show" @close="closePopup">
    <view class="bg-white w-full">
      <van-picker show-toolbar value-key="name" :columns="state.actualUserList" @confirm="handleChangeSubmit" @cancel="closePopup" title="选择使用人" />
    </view>
  </van-popup>
</template>
